<template>
	<!-- 编辑用户资料页 -->
	<view class="set">
		<view class="part1"  >
			<view class="img" >
				<text>头像</text>
				<image src="../../static/img/logo.png"></image>
				<image src="../../static/img/进入箭头.png"></image>
			</view>
			<view class="lin"></view>
			<view class="name">
				<text>昵称</text>
				<input v-model="uname" placeholder-class="nc" placeholder="你的昵称" />
			</view>
		</view>
		<view class="part2">
			<view class="qianming">
				<text>签名</text>
				<input v-model="sign" placeholder-class="nc" placeholder="编辑个性签名" />
			</view>
			<view class="lin"></view>
			<view class="sex">
				<text>性别</text>
				<input v-model="sex" placeholder-class="nc" placeholder="女" />
			</view>
		</view>
		<view class="part3">
			<view class="phone">
				<text>手机号</text>
				<input v-model="utel" placeholder-class="nc" placeholder="*******" />
			</view>
			<view class="lin"></view>
			<view class="email">
				<text>邮箱</text>
				<input v-model="uemail" placeholder-class="nc" placeholder="你的邮箱" />
			</view>
			<view class="lin"></view>
			<view class="career">
				<text>职业</text>
				<input v-model="ucareer" placeholder-class="nc" placeholder="你的职业" />
			</view>
		</view>
		<button class="but" @click="logclick">确认</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				uname:"蓝色心情",
				sign:"做一个开心的吃货",
				sex:"女",
				utel:"18865341765",
				uemail:"2810987112@qq.com",
				ucareer:"教师"
				}
		},
		onLoad() {
			// 查询用户信息
			this.queryUser()
		},
		methods: {
			// 查询
			queryUser() {
				let uid = uni.getStorageSync('uid')
				uni.request({
					url:'http://127.0.0.1:3030/queryUser',
					method:'POST',
					data:{
						_id:uid
					},
					success:(res)=>{
						let index = 0
						let result = res.data.data
						this.uname = result[index].uname
						this.utel = result[index].utel
						this.sign = result[index].sign
						this.sex = result[index].sex
						this.uemail = result[index].uemail
						this.ucareer = result[index].ucareer
						if(result == "查询成功"){
							uni.showToast({
								title:result,
								icon:'success'
							})
						}else if(result == "用户电话不能为空" || result == "用户密码不能为空" || result == "用户名称不能为空"|| result == "用户邮箱不能为空"){
							uni.showToast({
								title:result,
								icon:'error'
							})
						}
					}
				})
				
			},
			//修改用户信息请求
			logclick() {
				let uid = uni.getStorageSync('uid')
				uni.request({
					url:'http://127.0.0.1:3030/updateUser',
					method:'POST',
					data:{
						_id:uid,
						uname:this.uname,
						sign:this.sign,
						sex:this.sex,
						utel:this.utel,
						uemail:this.uemail,
						ucareer:this.ucareer
					},
					success:(res)=>{
						let result = res.data.msg
						if(result == "修改成功"){
							uni.showToast({
								title:result,
								icon:'success'
							}),
							// console.log(res.data.msg)
							//延迟2秒后执行跳转
							setTimeout(() => {
								uni.navigateTo({
									url:"../set/set"
								})
							},2000)
						}else if(result == "用户电话不能为空" || result == "用户密码不能为空" || result == "用户名称不能为空"|| result == "用户邮箱不能为空"){
							uni.showToast({
								title:result,
								icon:'error'
							})
						}
					}
				})
			}
		}
	}
</script>

<style>
/* 背景 */
.set{
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: antiquewhite;
}
/* 第一部分 */
.part1{
	width: 90%;
	height: 200rpx;
	background-color: aliceblue;
	margin-top: 35rpx;
	margin-left: 35rpx;
	border-radius: 20rpx;
}
/* 头像 */
.img{
	display: flex;
	height: 99rpx;
	align-items: center;
	justify-content: space-between;
	margin-left: 40rpx;
	margin-right: 40rpx;
}
.img text{
	font-size: 30rpx;
}
.img image{
	width: 60rpx;
	height: 60rpx;
	border-radius: 30rpx;
}
.lin{
	width: 90%;
	height: 2rpx;
	margin-left: 40rpx;
	background-color: darkgrey;
	padding:0;
}
/* 昵称 */
.name{
	height: 99rpx;
	display: flex;
	align-items: center;
	margin-left: 40rpx;
	margin-right: 40rpx;
}
.name input{
	width: 300rpx;
	margin-left: 100rpx;
}

/* 第二部分 */
.part2{
	width: 90%;
	height: 200rpx;
	background-color: aliceblue;
	margin-top: 35rpx;
	margin-left: 35rpx;
	border-radius: 20rpx;
	}
	/* 签名 */
	.qianming{
		height: 99rpx;
		display: flex;
		align-items: center;
		margin-left: 40rpx;
		margin-right: 40rpx;
	}
	.qianming input{
		font-size: 30rpx;
		width: 300rpx;
		margin-left: 100rpx;
	}
	/* 性别 */
	.sex{
		height: 99rpx;
		display: flex;
		align-items: center;
		margin-left: 40rpx;
		margin-right: 40rpx;
	}
	.sex input{
		font-size: 30rpx;
		width: 300rpx;
		margin-left: 100rpx
	}
	/* 第三部分 */
	.part3{
		width: 90%;
		height: 300rpx;
		background-color: aliceblue;
		margin-top: 35rpx;
		margin-left: 35rpx;
		border-radius: 20rpx;
		}
		/* 手机号 */
		.phone{
			height: 99rpx;
			display: flex;
			align-items:center;
			margin-left: 40rpx;
			margin-right: 40rpx;
		}
		.phone input{
			font-size: 30rpx;
			width: 300rpx;
			margin-left: 100rpx
			}
		/* 邮箱 */
		.email{
			height: 99rpx;
			display: flex;
			align-items:center;
			margin-left: 40rpx;
			margin-right: 40rpx;
		}
		.email input{
			font-size: 30rpx;
			width: 300rpx;
			margin-left: 100rpx
		}
		/* 职业*/
		.career{
			height: 99rpx;
			display: flex;
			align-items: center;
			margin-left: 40rpx;
			margin-right: 40rpx;
		}
		.career input{
			font-size: 30rpx;
			width: 300rpx;
			margin-left: 100rpx
		}
.btn{
	margin-top: 200rpx;
	height: 100rpx;
	width: 90%;
	border-radius: 50rpx;
	border: 2rpx solid #00A3BC;
	color: #00A3BC;
	line-height: 100rpx;
	font-weight: bold;
	font-size: 50rpx;
}
</style>